/**
 * 设备上报
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Button, Input, Card, Row, Col, Form, Progress } from 'antd';
import { deviceReportShow } from '../../services/device';
import { isSuccess } from '../../configs/error';

const styles = {
    rowStyle: {
        paddingTop: '15px'
    },
    colStyle: {
        border: '1px solid #cccccc',
        padding: '0px',
        marginBottom: '20px',
        marginRight: '15px'
    },
    tt: {
        backgroundColor: '#3a94d2',
        padding: '4px 8px',
    },
    ht: {
        display: 'inline-block',
        color: 'white',
	},
    it: {
        padding: '60px 4px',
        textAlign: 'center'
    },
    pro: {
        textAlign: 'center',
        boxSizing: 'border-box',
        padding: '10px'
    },
    lie: {
        textAlign: 'center',
        boxSizing: 'border-box',
        padding: '59px 4px',
    }
};


class DetailControl extends Component {
    state = {
        reports: []
    }
    async componentWillMount() {
        const { device: { detailData: { sno } } } = this.props;
        const res = await deviceReportShow(sno);
        if (isSuccess(res)) {
            this.setState({ reports: res.data });
        }
    }

    render() {
        const { device: { detailData } } = this.props;
        const { reports } = this.state;
        return (
            <div>
                <Form>
                    <Row style={styles.rowStyle}>
                        {
                            reports.map((v, i) => {
                                const keys = Object.keys(v.jsonObject);
                                const value = v.jsonObject[keys[0]];
                                let max = 100;
                                if (v.showType === 2 || v.showType === 3) {
                                    const parse = v.range ? JSON.parse(v.range) : { max: '100' };
                                    max = parseInt(parse.max);
                                }
                                const pst = ((parseInt(value) / max) * 100).toFixed(0);
                                return (
                                    <Col span={7} style={styles.colStyle} key={`rep${i}`}>
                                        <div style={styles.tt}>
                                            <h3 style={styles.ht}>{keys[0]}</h3>
                                        </div>
                                        {v.showType === 1 ? ( // 文本
                                            <div style={styles.it}><span>{value || '---'}</span></div>
                                        ) : null}
                                        {v.showType === 2 ? ( // 环状
                                            <div style={styles.pro}><Progress type="circle" percent={pst} width={118} /></div>
                                        ) : null}
                                        {v.showType === 3 ? ( // 条状
                                            <div style={styles.lie}><Progress percent={pst} /></div>
                                        ) : null}
                                    </Col>
                                );
                            })
                        }
                    </Row>
                </Form>
            </div>
        );
    }

}


export default connect(({ device }) => ({ device }))(Form.create({})(DetailControl));

